<template>
  <div class="popupMain">
    <transition name="popupAnimation">
      <div v-if="popupisShow" class="popup">
        <div class="popup_title">{{popup.title}}</div>
        <div class="popup_content">{{popup.content}}</div>
        <div class="popup_close" v-if="popup.closeIsShow" @touchend="closeTouch"></div>
        <div class="popup_botton" @touchend="bottonTouch">{{popup.botton}}</div>
      </div>
    </transition>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
export default {
  data() {
    return {
      popupisShow: false
    }
  },
  mounted() {
    this.popupisShow = true
  },
  computed: {
    ...mapGetters("mainStatus", {
      popup: "getPopup"
    })
  },
  methods: {
    closeTouch: function () {
      this.touchMusic()
      this.setPopup({
        isShow: false
      })
    },
    bottonTouch: function () {
      this.touchMusic()
      if (this.popup.router) this.$router.push({ path: "/" + this.popup.router })
      if (this.popup.callback) this.popup.callback()
      this.setPopup({
        isShow: false
      })
    },
    ...mapActions("mainStatus", ["setPopup"])
  }
}
</script>

<style lang="stylus" scoped>
.popupMain
  z-index 101
  position absolute
  width 100%
  height 100%
  background rgba(0, 0, 0, 0.5)
  color rgb(250, 250, 250)
  .popup
    $center('WHLT', 23rem, 14rem)
    position absolute
    background url($urlTitle + 'popup/popupBg.png') 0 0 / 100% 100%
    .popup_title
      $coord('WHLT', 8rem, 1.9rem, 6.5rem, 0.6rem)
      $alignCenter()
      font-size 1rem
    .popup_content
      $coord('WHLT', 15rem, 6.5rem, 3rem, 3.5rem)
      background url($urlTitle + 'popup/popupContent.png') 0 0 / 100% 100%
      box-sizing border-box
      padding 1rem
      $alignCenter()
      color rgb(251, 149, 55)
      font-size 1rem
      line-height 1.5rem
    .popup_close
      $coord('WHRT', 1rem, 1rem, 0.9rem, 2.9rem)
      background url($urlTitle + 'popup/popupClose.png') 0 0 / 100% 100%
    .popup_botton
      $coord('WHLB', 5rem, 2.1rem, 8rem, 1.3rem)
      background url($urlTitle + 'popup/popupBotton.png') 0 0 / 100% 100%
      $alignCenter()
      font-size 1rem
</style>
